<template>
	<div>
		<el-container style="position: absolute;top: 55px;bottom: 0;left: 0;right: 0;">
			<el-header class="d-flex align-items-center border-bottom">
				<!-- 头部 -->
				<div class="d-flex mr-auto">
					<el-select class="mr-2" placeholder="请选择图片排序方式" size="mini" v-model="searchForm.ordered"
						style="width: 150px;">
						<el-option label="降序" value="description"></el-option>
						<el-option label="升序" value="asc"></el-option>
					</el-select>
					<el-input class="mr-2" size="mini" placeholder="输入图片名称" v-model="searchForm.keyword"
						style="width: 150px;"></el-input>
					<el-button type="success" size="mini" @click="getImageList">搜索</el-button>
				</div>
				<el-button type="warning" size="mini" @click="unChoose" v-if="chooseList.length">
					取消选中</el-button>
				<el-button type="danger" size="mini" @click="imageDel({ all: true })" v-if="chooseList.length">
					批量删除</el-button>
				<el-button type="success" size="mini" @click="openAlbumModel(false)">创建相册</el-button>
				<el-button type="warning" size="mini" @click="uploadModel = true">上传图片</el-button>
			</el-header>
			<el-container>
				<el-aside width="200px" style="position: absolute;top: 60px;left: 0;bottom: 60px;"
					class="bg-white border-right">
					<!-- 侧边 | 相册列表-->
					<ul class="list-group list-group-flush">
						<album-item v-for="(item, index) in albums" :key="index" :item="item" :index="index"
							:active="albumIndex === index" @change="albumChange" @edit="openAlbumModel" @del="albumDel">
						</album-item>
					</ul>

				</el-aside>
				<el-container>
					<el-main style="position: absolute;top: 60px;left:200px;bottom: 60px;right: 0;">
						<!-- 主内容 -->
						<el-row :gutter="10">
							<el-col :span="25" :lg="5" :md="5" :sm="8" v-for="(item, index) in imageList" :key="index">
								<el-card class=" box-card mb-3 position-relative" style="cursor: pointer;"
									:body-style="{ 'padding': '0' }" shadow="hover">

									<div class="border" :class="{ 'border-danger': item.ischeck }">

										<span class="badge badge-danger" style="position: absolute;right: 0;top: 0;"
											v-if="item.ischeck">
											{{ item.checkOrder }}</span>


										<img :src="item.url" class="w-100" style="height: 150px;"
											@click="choose(item)" />
										<div class="w-100 text-white px-1"
											style="background: rgba(0,0,0,0.5);margin-top: -25px;position: absolute;">
											<span class="small">{{ item.name }}</span>
										</div>

										<div class="p-2 text-center">
											<el-button-group>
												<el-button icon="el-icon-view" size="mini" class="p-2"
													@click="previewImage(item)"></el-button>
												<el-button icon="el-icon-edit" size="mini" class="p-2"
													@click="imageEdit(item, index)"></el-button>
												<el-button icon="el-icon-delete" size="mini" class="p-2"
													@click="imageDel({ index, item })"></el-button>
											</el-button-group>
										</div>

									</div>


								</el-card>
							</el-col>
						</el-row>

					</el-main>
				</el-container>
			</el-container>
			<el-footer class="border-top d-flex align-items-center px-0">
				<!-- 底部 -->
				<div style="width: 200px; flex-shrink: 0;"
					class="h-100 d-flex align-items-center justify-content-center border-right">
					<el-button-group>
						<el-button size="mini" :disabled="albumPage === 1"
							@click="changeAlbumPage('pre')">上一页</el-button>
						<el-button size="mini" @click="changeAlbumPage('next')"
							:disabled="albumPage === Math.ceil(albumTotal / 10)">下一页</el-button>
					</el-button-group>
				</div>
				<div style="flex: 1;" class="px-2">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</el-footer>
		</el-container>


		<!-- 修改|创建相册 -->
		<el-dialog :title="albumModelTitle" :visible.sync="albumModel">
			<el-form ref="form" :model="albumForm" label-width="80px">
				<el-form-item label="相册名称">
					<el-input v-model="albumForm.name" size="medium" placeholder="请输入相册名称"></el-input>
				</el-form-item>
				<el-form-item label="相册排序">
					<el-input-number v-model="albumForm.ordered" :min="0" size="medium"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="albumModel = false">取 消</el-button>
				<el-button type="primary" @click="confirmAlbumModel">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 上传图片 -->
		<el-dialog title="上传图片" :visible.sync="uploadModel" @close="__init">
			<!--  -->
			<div class="text-center">
				<el-upload class="upload-demo w-100" drag action="/admin/image/upload" multiple
					:headers="{ token: $store.state.user.token }" :data="{ imageClassId: imageClassId }" name="file"
					:on-success="uploadSuccess">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
				</el-upload>
			</div>
		</el-dialog>

		<!-- 预览图片 -->
		<el-dialog :visible.sync="previewModel" width="60vw" top="5vh">
			<div style="margin: -60px -20px -30px -20px;">
				<img :src="previewUrl" class="w-100" />
			</div>
		</el-dialog>

	</div>
</template>

<script>
import albumItem from '@/components/image/album-item.vue';
export default {
	inject: ['layout'],
	components: {
		albumItem
	},
	data() {
		return {
			uploadModel: false,
			searchForm: {
				ordered: "desc",
				keyword: ""
			},
			albumIndex: 0,
			albumModel: false,
			albumEditIndex: -1,
			albumForm: {
				name: "",
				ordered: 0
			},
			albums: [],
			albumPage: 1,
			albumTotal: 0,

			previewModel: false,
			previewUrl: "",
			imageList: [],
			// 选中的数组
			chooseList: [],
			currentPage: 1,
			pageSize: 10,
			pageSizes: [10, 20, 50, 100],
			total: 10
		}
	},
	computed: {
		albumModelTitle() {
			return this.albumEditIndex > -1 ? '修改相册' : '创建相册'
		},
		// 选中相册id
		imageClassId() {
			let item = this.albums[this.albumIndex]
			if (item) {
				console.log("选择相册id",item.id);
				return item.id
			}
			return 0
		},
		// 当前选中相册的图片列表URL
		getImageListUrl() {
			let other = ''
			if (this.searchForm.keyword != '') {
				other = `&keyword=${this.searchForm.keyword}`
			}
			return `/admin/imageClass/${this.imageClassId}/image/${this.currentPage}?limit=${this.pageSize}&ordered=${this.searchForm.ordered}${other}`
		}
	},
	created() {
		this.__init()
	},
	methods: {
		// 取消选中
		unChoose() {
			this.imageList.forEach(img => {
				// 找到所有选中的图片
				let i = this.chooseList.findIndex(item => {
					return item.id === img.id
				})
				if (i > -1) {
					// 取消选中样式，选中排序归零
					img.ischeck = false
					img.checkOrder = 0
					// 从chooseList中移除
					this.chooseList.splice(i, 1)
				}
			})
		},
		// 选中图片
		choose(item) {
			// 选中
			if (!item.ischeck) {
				// 加入选中
				this.chooseList.push({ id: item.id, url: item.url })
				// 计算序号
				item.checkOrder = this.chooseList.length
				// 修改状态
				item.ischeck = true
				return;
			}
			// 取消选中
			// 找到在chooseList中的索引，
			let i = this.chooseList.findIndex(v => v.id === item.id)
			if (i === -1) return;
			// 重新计算序号
			let length = this.chooseList.length
			// 取消选中中间部分
			if (i + 1 < length) {
				// 重新计算imageList选中序号
				for (let j = i; j < length; j++) {
					let no = this.imageList.findIndex(v => v.id === this.chooseList[j].id)
					if (no > -1) {
						this.imageList[no].checkOrder--
					}
				}
			}
			// 删除
			this.chooseList.splice(i, 1)
			// 修改状态
			item.ischeck = false
			// 重置序号
			item.checkOrder = 0
		},
		// 获取对应相册下的图片列表
		getImageList() {
			this.layout.showLoading()
			this.axios.get(this.getImageListUrl, {
				token: true
			}).then(res => {
				let result = res.data.data
				this.imageList = result.list.map(item => {
					return {
						id: item.id,
						url: item.url,
						name: item.name,
						ischeck: false,
						checkOrder: item.ordered
					}
				})
				this.total = result.totalCount
				this.layout.hideLoading()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		__init() {
			// 获取相册列表
			this.layout.showLoading()
			this.axios.get('/admin/imageClass/' + this.albumPage, {
				token: true
			}).then(res => {
				let result = res.data.data
				this.albums = result.images
				//console.log("zzzzzzz",this.albums);
				
				this.albumTotal = result.totalCount
				console.log("zzzzzzz",this.albumTotal);
				
				// 获取选中相册下的第一页图片列表
				this.getImageList()
				//console.log("列表总数", this.total);
			}).catch(err => {
				this.layout.hideLoading()
			})

			// for (var i = 0; i < 20; i++) {
			// 	this.albums.push({
			// 		name:"相册"+i,
			// 		num:Math.floor(Math.random()*100),
			// 		ordered:0
			// 	})
			// }

			// for (var i = 0; i < 30; i++) {
			// 	this.imageList.push({ 
			// 		id:i,
			// 		url:"https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/40.jpg",
			// 		name:"图片"+i,
			// 		ischeck:false,
			// 		checkOrder:0
			// 	})
			// }
		},
		// 切换相册
		albumChange(index) {
			this.albumIndex = index
			this.getImageList()
		},
		// 打开相册修改/创建框
		openAlbumModel(obj) {
			// 修改
			if (obj) {
				let { item, index } = obj
				// 初始化表单
				this.albumForm.name = item.name
				this.albumForm.ordered = item.ordered
				this.albumEditIndex = index
				// 打开模态框
				return this.albumModel = true
			}
			// 创建
			this.albumForm = {
				name: "",
				ordered: 0
			}
			this.albumEditIndex = -1
			this.albumModel = true
		},
		// 点击确定修改/创建相册
		confirmAlbumModel() {
			// 判断是否为修改
			if (this.albumEditIndex > -1) {
				this.albumEdit()
				return this.albumModel = false
			}
			// 创建相册
			this.layout.showLoading()
			this.axios.post('/admin/imageClass', this.albumForm, {
				token: true
			}).then(res => {
				// 隐藏表单
				this.albumModel = false
				this.layout.hideLoading()
				this.$message({
					message: '创建成功',
					type: 'success'
				});
				this.__init()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		// 修改相册
		albumEdit() {
			let item = this.albums[this.albumEditIndex]
			this.layout.showLoading()
			this.axios.put('/admin/imageClass/', {
				id: item.id,
				name: this.albumForm.name,
				ordered: this.albumForm.ordered
			}, {
				token: true
			}).then(res => {
				this.$message({
					message: '修改成功',
					type: 'success'
				});
				this.layout.hideLoading()
				this.__init()
			}).catch(err => {
				this.layout.hideLoading()
			})
		},
		// 删除相册
		albumDel(index) {
			this.$confirm('是否删除该相册', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let id = this.albums[index].id
				this.layout.showLoading()
				this.axios.delete('/admin/imageClass/' + id + '/delete', {
					token: true
				}).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.__init()
					this.layout.hideLoading()
				}).catch(err => {
					this.layout.hideLoading()
				})
			})
		},
		// 预览图片
		previewImage(item) {
			this.previewUrl = item.url
			this.previewModel = true
		},
		// 修改图片名称
		imageEdit(item, index) {
			this.$prompt('请输入新名称', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputValue: item.name,
				inputValidator(val) {
					if (val === '') {
						return '图片名称不能为空'
					}
				}
			}).then(({ value }) => {
				this.layout.showLoading()
				this.axios.put('/admin/image', {
					id: item.id,
					name: value
				}, {
					token: true
				}).then(res => {
					this.__init()
					this.layout.hideLoading()
					this.$message({
						message: '修改成功',
						type: 'success'
					});
				}).catch(err => {
					this.layout.hideLoading()
				})
			})
		},
		// 删除当前图片
		imageDel(obj) {
			this.$confirm(obj.all ? '是否删除选中图片?' : '是否删除该图片?',
				'提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.layout.showLoading()
				if (obj.all) {
					// 批量删除
					let ids = this.chooseList.map(item => item.id)
					console.log("id集合----》", ids);
					this.axios.post('/admin/image/deleteAll',
						ids
						, {
							token: true
						}).then(res => {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.__init()
							this.chooseList = []
							this.layout.hideLoading()
						}).catch(err => {
							this.layout.hideLoading()
						})
				} else {
					// 删除单个
					this.axios.delete('/admin/image/' + obj.item.id, {
						token: true
					}).then(res => {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						this.__init()
						this.layout.hideLoading()
					}).catch(err => {
						this.layout.hideLoading()
					})
				}
			})
		},
		handleSizeChange(val) {
			this.pageSize = val
			this.getImageList()
		},
		handleCurrentChange(val) {
			this.currentPage = val
			this.getImageList()
		},
		// 相册分页功能
		changeAlbumPage(type) {
			if (type === 'pre') {
				this.albumPage--
			} else {
				this.albumPage++
			}
			this.__init()
		},
		// 上传成功
		uploadSuccess(response, file, fileList) {
			//this.__init()
			this.$message({
				message: response.message,
				type: 'success'
			});
			this.layout.hideLoading()
		}
	},
}
</script>

<style scoped>
.sum-active {
	color: #67C23A !important;
	background-color: #f0f9eb !important;
	border-color: #c2e7b0 !important;
}
::v-deep .el-col-25{
	width: 20%;
}
</style>
